<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="AcelleSystemLayouts">
    <title>3</title>
    <!-- Bootstrap core CSS -->
    <link href="{{asset('order/css/bootstrap.min.css')}}" rel="stylesheet">

    <link href="{{asset('order/css/style(13).css')}}" rel="stylesheet">
    <link href="{{asset('order/js/layui/css/layui.css')}}" rel="stylesheet">

    <style>

        .o-page .extra .list .item-box .item .pa-1 .name-box .name span{
            font-weight:500
        }
        .test{
            font-weight:200
        }

        .o-page .itinerary .list-box .list .item .e-time .st-1 h4 .sp-1{
            font-weight:600
        }
        .o-page .itinerary .list-box .list .item .s-time h4 .sp-1{
            font-weight:600
        }

        .o-page .itinerary .list-box .list .item .s-btn-box .s-btn{
            font-weight:550
        }
        .o-page .itinerary .list-box .list .item .s-time h4{
            font-weight:400
        }
        .o-page .o-des p span{
            font-weight:550
        }
        h1,h2,h3,h4 {
            font-weight: 500;
        }
    </style>

</head>

<body>
<div class="o-page">
    <div class="o-title">Manage your booking</div>
    <div class="o-des c-m">
        <p>Your booking reference:<span>DLTYKR</span><span ><img src="{{asset('order/image/icons/copy.svg')}}"></span></p>
        <p>Booking status: <span>Confirmed</span></p>
        <p>Booking date: <span>{{$createdAt}}</span></p>
    </div>
    <div class="itinerary c-m">
        <h4 class="title">Your itinerary</h4>
        @foreach($flightInfos as $k=> $info)
            <div class="list-box">
                @if($isDouble==1)
                    <div class="des"> @if($k==0) Departure @else Return @endif</div>
                @endif
                <div class="list">
                    <div class="item">
                        <div class="name">
                            <span>{{$info['full_start_airport']}}</span><span class="svg">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right w-5 h-5">
                                    <path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path>
                                </svg>
                            </span>
                            <span>{{$info['full_end_airport']}}</span>
                        </div>
                        <div class="day">{{$info['date']}}</div>
                        <div class="s-btn-box"><span class="s-btn">SAVER</span></div>
                    </div>
                    <div class="item">
                        <div class="s-time">
                            <h4><span class="sp-1">{{$info['start_fly_time']}} -</span> <span class="sp-2"></span><span class="test">{{$info['simple_start_airport']}}</span></h4>
                            <div class="st-2">{{$info['full_start_airport']}}</div>
                        </div>
                        <div class="line" style="margin-top: 17px">
                            <div class="l-1">
                                <div class="hr-box">
                                    <img style="margin-top: -23px" src="{{asset('order/image/icons/itinerary-plane1.svg')}}">
                                </div>
                            </div>
                            <div class="l-2">Non-stop, {{$info['during']}}</div>
                        </div>
                        <div class="e-time">
                            <div class="st-1">
                                <h4><span class="sp-1">{{$info['end_fly_time']}} -</span> <span class="sp-2"></span><span class="test">{{$info['simple_end_airport']}}</span></h4>
                                <div class="st-1-des">{{$info['full_end_airport']}}</div>
                            </div>
                            <div class="st-2">
                                <div class="d-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plane-takeoff w-4 h-4"><path d="M2 22h20"></path><path d="M6.36 17.4 4 17l-2-4 1.1-.55a2 2 0 0 1 1.8 0l.17.1a2 2 0 0 0 1.8 0L8 12 5 6l.9-.45a2 2 0 0 1 2.09.2l4.02 3a2 2 0 0 0 2.1.2l4.19-2.06a2.41 2.41 0 0 1 1.73-.17L21 7a1.4 1.4 0 0 1 .87 1.99l-.38.76c-.23.46-.6.84-1.07 1.08L7.58 17.2a2 2 0 0 1-1.22.18Z"></path></svg></div>
                                <div class="d-1">{{$info['flight_no']}}</div>
                            </div>
                        </div>
                        <div class="detail">View details ></div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    <div class="passengers c-m">
        <h4 class="title">Passengers</h4>
        <div class="list">
            @foreach($passengers as $passenger)
                <div class="item">
                    <div class="pa-1">
                        <div class="name-box">
                            <div class="tag noclass">{{$passenger['sub_name']}}</div>
                            <div class="name"><span>{{$passenger['name']}}</span> ( {{$passenger['type']}} )</div>
                        </div>
                        <div class="icon">
                            <svg t="1721053452659" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4216" width="1em" height="1em"><path d="M512 711.68h-16.497778l-15.928889-13.084444L159.288889 377.742222l56.32-56.32L512 617.813333l296.391111-296.391111 56.32 56.32-332.231111 332.231111-20.48 1.706667z" p-id="4217" fill="#515151"></path></svg>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

    </div>
    <div class="contact c-m">
        <h4 class="title">Contact Information</h4>
        <div class="list">
            <div class="item">
                <div class="pa-1">
                    <div class="name-box">
                        <div class="name"><span>YANGYUJIE YANGYUJIE </span></div>
                    </div>
                    <div class="icon">
                        <svg t="1721053452659" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4216" width="1em" height="1em"><path d="M512 711.68h-16.497778l-15.928889-13.084444L159.288889 377.742222l56.32-56.32L512 617.813333l296.391111-296.391111 56.32 56.32-332.231111 332.231111-20.48 1.706667z" p-id="4217" fill="#515151"></path></svg>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="extra c-m">
        <h4 class="title">Extra services</h4>
        {{--Seat selection--}}
        <div class="list">
            <div class="item-box">
                <div class="item-title">
                    <div class="left">
                        <div class="icon"><img src="{{asset('order/image/icons/view-itinerary-seat.svg')}}"></div>
                        <div class="con">
                            <div class="name">Seat selection</div>
                            <div class="des">Your selected seats</div>
                        </div>
                    </div>
                    <div class="right">
                        <div class="icon"><img src="{{asset('order/image/icons/edit.png')}}"></div>
                        <div class="mod">Modify</div>
                    </div>
                </div>
                <div class="item">
                    @foreach($flightInfos as $flightInfo)
                        <div class="pa-1">
                            <div class="name-box">
                                <div class="icon"><img src="{{asset('order/image/icons/itinerary-plane1.svg')}}"></div>
                                <div class="name"><span>{{$flightInfo['start_airport']}} to {{$flightInfo['end_airport']}}</span></div>
                            </div>
                        </div>
                        <div class="pa-2">
                            @foreach($passengers as $passenger)
                                <div class="li">
                                    <div class="name noclass">
                                        {{$passenger['sub_name']}}
                                    </div>
                                    <div class="des">
                                        <div class="des-1">{{$passenger['name']}}</div>
                                        <div class="des-2"> {{$passenger['type']}} </div>
                                    </div>
                                    <div class="num assign">Not Assigned</div>
                                </div>
                            @endforeach
                        </div>
                    @endforeach

                </div>
            </div>
        </div>
        {{--Extra baggage--}}
        <div class="list">
            <div class="item-box">
                <div class="item-title">
                    <div class="left">
                        <div class="icon"><img src="{{asset('order/image/icons/view-itinerary-baggage.svg')}}"></div>
                        <div class="con">
                            <div class="name">Extra baggage</div>
                            <div class="des">Your baggage allowance</div>
                        </div>
                    </div>
                    <div class="right">
                        <div class="icon"><img src="{{asset('order/image/icons/edit.png')}}"></div>
                        <div class="mod">Modify</div>
                    </div>
                </div>
                <div class="item">
                    @foreach($flightInfos as $flightInfo)
                        <div class="pa-1">
                            <div class="name-box">
                                <div class="icon"><img src="{{asset('order/image/icons/itinerary-plane1.svg')}}"></div>
                                <div class="name"><span>{{$flightInfo['start_airport']}} to {{$flightInfo['end_airport']}}</span></div>
                            </div>
                        </div>
                        <div class="pa-2">
                            @foreach($passengers as $passenger)
                                <div class="li">
                                    <div class="name noclass">
                                        {{$passenger['sub_name']}}
                                    </div>
                                    <div class="des">
                                        <div class="des-1">{{$passenger['name']}}</div>
                                        <div class="des-2"> {{$passenger['type']}} </div>
                                    </div>
                                    <div class="num">
                                        <div class="num-1">Baggage 20kg Free</div>
                                        <div class="num-2">USD 0.00</div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endforeach

                </div>
            </div>
        </div>
        {{--Meals--}}
        <div class="list">
            <div class="item-box">
                <div class="item-title">
                    <div class="left">
                        <div class="icon"><img src="{{asset('order/image/icons/view-itinerary-utentils.svg')}}"></div>
                        <div class="con">
                            <div class="name">Meals</div>
                            <div class="des">Your selected meals</div>
                        </div>
                    </div>
                    <div class="right">
                        <div class="icon"><img src="{{asset('order/image/icons/edit.png')}}"></div>
                        <div class="mod">Modify</div>
                    </div>
                </div>
                <div class="item">
                    @foreach($flightInfos as $flightInfo)
                        <div class="pa-1">
                            <div class="name-box">
                                <div class="icon"><img src="{{asset('order/image/icons/itinerary-plane1.svg')}}"></div>
                                <div class="name"><span>{{$flightInfo['start_airport']}} to {{$flightInfo['end_airport']}}</span></div>
                            </div>
                        </div>
                        <div class="pa-2">
                            @foreach($passengers as $passenger)
                                <div class="li">
                                    <div class="name noclass">
                                        {{$passenger['sub_name']}}
                                    </div>
                                    <div class="des">
                                        <div class="des-1">{{$passenger['name']}}</div>
                                        <div class="des-2"> {{$passenger['type']}} </div>
                                    </div>
                                    <div class="num">No Meal</div>
                                </div>
                            @endforeach
                        </div>
                    @endforeach

                </div>
            </div>
        </div>
        {{--Extra SSR--}}
        <div class="list">
            <div class="item-box">
                <div class="item-title">
                    <div class="left">
                        <div class="icon"><img src="{{asset('order/image/icons/bell-concierge.svg')}}"></div>
                        <div class="con">
                            <div class="name">Extra SSR</div>
                            <div class="des">Your extra services</div>
                        </div>
                    </div>
                    <div class="right">
                        <div class="icon"><img src="{{asset('order/image/icons/edit.png')}}"></div>
                        <div class="mod">Modify</div>
                    </div>
                </div>
                <div class="item">
                    @foreach($flightInfos as $flightInfo)
                        <div class="pa-1">
                            <div class="name-box">
                                <div class="icon"><img src="{{asset('order/image/icons/itinerary-plane1.svg')}}"></div>
                                <div class="name"><span>{{$flightInfo['start_airport']}} to {{$flightInfo['end_airport']}}</span></div>
                            </div>
                        </div>
                        <div class="pa-2">
                            @foreach($passengers as $passenger)
                                <div class="li">
                                    <div class="name noclass">
                                        {{$passenger['sub_name']}}
                                    </div>
                                    <div class="des">
                                        <div class="des-1">{{$passenger['name']}}</div>
                                        <div class="des-2"> {{$passenger['type']}} </div>
                                    </div>
                                    <div class="num">No Extra SSR</div>
                                </div>
                            @endforeach
                        </div>
                    @endforeach

                </div>
            </div>
        </div>
    </div>
    <div class="c-info  c-m">
        <h4 class="title">Contact Information</h4>
        <div class="con">
            <div class="con-t">YANGYUJIE YANGYUJIE</div>
            <div class="con-des">
                Sichuan Global International Travel Service Company Limited<br/>
                SHUYUEDONGLU 288HAO<br/>
                B-709<br/>
                610000 CHENGDU<br/>
            </div>
            <div class="phone">
                <div class="item">
                    <div class="name">Mobile Phone</div>
                    <div class="num">: 8618080819620</div>
                </div>
                <div class="item">
                    <div class="name">Alternate Phone</div>
                    <div class="num">: 8618080819620</div>
                </div>
                <div class="item">
                    <div class="name">Email</div>
                    <div class="num">: 1327199713@qq.com</div>
                </div>
            </div>
        </div>
    </div>

    <div class="payment c-m">
        <h4 class="title">Payment details</h4>
        <div class="list">
            <div class="item">
                <div class="pa-1">
                    <div class="name-box">
                        <div class="name"><span>Total price </span>(including taxes, fees)</div>
                        <div class="num">USD 0.00</div>
                    </div>
                    <div class="icon">
                        <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" class="w-[20px] text-[#333] group-open:rotate-180 transition" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M256 217.9L383 345c9.4 9.4 24.6 9.4 33.9 0 9.4-9.4 9.3-24.6 0-34L273 167c-9.1-9.1-23.7-9.3-33.1-.7L95 310.9c-4.7 4.7-7 10.9-7 17s2.3 12.3 7 17c9.4 9.4 24.6 9.4 33.9 0l127.1-127z"></path></svg>
                    </div>
                </div>

            </div>
        </div>
    </div>

</div>

</body>

</html>
